<template>
  <div class="user-visualization">
    <div class="user-info">
      <h2 class="title">用户信息可视化</h2>
      <div class="form-group">
        <label>租户ID</label>
        <input v-model="tenantId">
      </div>
      <div class="chart-container">
        <div class="chart-item">
          <h3 class="chart-title">角色分布</h3>
          <div :id="'role-chart-' + tenantId" class="chart" />
        </div>
        <div class="chart-item">
          <h3 class="chart-title">密码分布</h3>
          <div :id="'password-chart-' + tenantId" class="chart" />
        </div>
        <div class="chart-item">
          <h3 class="chart-title">用户名</h3>
          <div :id="'username-chart-' + tenantId" class="chart" />
        </div>
      </div>
    </div>
  </div>
</template>

<!--
<script>
import echarts from 'echarts'
import { findPageF } from '@/api/user'
/* import request from '@/request'*/

export default {
  data() {
    return {
      tenantId: '',
      roleChart: null,
      passwordChart: null,
      usernameChart: null
    }
  },
  watch: {
    tenantId() {
      this.initData()
    }
  },
  async mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        const res = await findPageF({ tenantId: this.tenantId })
        const data = res.data.records
        this.initRoleChart(data)
        this.initPasswordChart(data)
        this.initUsernameChart(data)
      } catch (error) {
        console.log(error)
      }
    },
    initRoleChart(data) {
      const roleCounts = Array.from({ length: 6 }, () => 0)
      data.forEach(item => {
        roleCounts[item.role] += 1
      })
      const option = {
        backgroundColor: '#fff',
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {

            type: 'shadow'

          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['管理员', '普通用户', '市场部门', '测试部门', '销售部门', '其他'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data: roleCounts
          }
        ]
      }
      this.roleChart = echarts.init(document.getElementById(`role-chart-${this.tenantId}`))

      /*   this.roleChart = echarts.init(document.getElementById(role-chart,${this.tenantId}))*/
      this.roleChart.setOption(option)
    },
    initPasswordChart(data) {
      const passwords = data.map(item => item.password)
      const passwordCounts = {}
      passwords.forEach(password => {
        passwordCounts[password] = (passwordCounts[password] || 0) + 1
      })
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '密码分布',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: Object.keys(passwordCounts).map(key => ({
              value: passwordCounts[key],
              name: key
            }))
          }
        ]
      }
      this.passwordChart = echarts.init(document.getElementById(`password-chart-${this.tenantId}`))

      this.passwordChart.setOption(option)
    },
    initUsernameChart(data) {
      const usernames = data.map(item => item.username)
      const usernameCounts = {}
      usernames.forEach(username => {
        usernameCounts[username] = (usernameCounts[username] || 0) + 1
      })
      const option = {
        backgroundColor: '#fff',
        xAxis: [{
          type: 'category',
          data: Object.keys(usernameCounts),
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '人数',
          type: 'bar',
          barWidth: '60%',
          data: Object.values(usernameCounts)
        }]
      }
      this.usernameChart = echarts.init(document.getElementById(`username-chart-${this.tenantId}`))

      this.usernameChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.user-visualization {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.user-info {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 18px;
  margin-bottom: 10px;
}

.form-group input {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ddd;
  outline: none;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.chart-item {
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-title {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

.chart {
  height: 300px;
}
</style>
-->
